import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Button,
  View,
  Slider,
  TouchableOpacity,
  Linking,

} from 'react-native';
import { globalStyles } from './StyleSheet';
import {Icon,} from 'react-native-elements';
import QRCodeScanner from 'react-native-qrcode-scanner';


export default class QrCodeScannerView extends Component<Props> {


  onSuccess(qr) {
    this.props.navigation.goBack()
    
    Linking
      
      dataManager.getPlaylistInfoById(qr.data)
      
      .catch(err => console.error('An error occured', err))
      

      return (
        newlyScannedPlaylist = qr.data,
        console.log('data scaned is: ', newlyScannedPlaylist)
        );
      
  }


  render() {
    return (
      <View style={styles.container}>
        <QRCodeScanner
            onRead={
              this.onSuccess.bind(this)}
            showMarker={true}
            topContent={
              <Button
                title="Return to Library"
                onPress={() => this.props.navigation.goBack()}/>}
        />
      </View>
      )

  }
}

//export {scanedPlaylist}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#3C3C3C',

  },
});